import React, { Component } from "react";
import {
  Modal,
  Input,
  Card,
  Radio,
  notification,
  Button,
  Icon,
  Select
} from "antd";
import axios from "axios";
class AddQuestion extends Component {
  constructor(props) {
    super(props);
    this.radioShowModal = this.radioShowModal.bind(this);
    this.radioHandleOk = this.radioHandleOk.bind(this);
    this.radioHandleCancel = this.radioHandleCancel.bind(this);
    this.completionHandleOk = this.completionHandleOk.bind(this);
    this.completionHandleCancel = this.completionHandleCancel.bind(this);
    this.completionShowModal = this.completionShowModal.bind(this);
    this.radioPlus = this.radioPlus.bind(this);
    this.radioMinus = this.radioMinus.bind(this);
    this.getRadioOptions = this.getRadioOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
    // 设置 initial state
    this.state = {
      radioVisible: false,
      radioOptionsCount: [],
      type: "radio",
      completionVisible: false
    };
  }
  getRadioOptions() {
    return this.state.radioOptionsCount.map(data => {
      var id = "radio-options" + data;
      return (
        <div key={data}>
          <h5
            style={{
              display: "inline-block"
            }}
          >
            <span className="label label-info">选项{data}</span>
          </h5>
          <Input
            style={{
              width: 200,
              marginTop: 10,
              marginLeft: 10
            }}
            id={id}
            placeholder="请输入选项"
          />
        </div>
      );
    });
  }
  radioPlus() {
    this.state.radioOptionsCount.push(this.state.radioOptionsCount.length + 1);
    this.setState({ radioVisible: false });
    this.setState({ radioVisible: true });
  }
  radioMinus() {
    this.state.radioOptionsCount.pop();
    this.setState({ radioVisible: false });
    this.setState({ radioVisible: true });
  }
  radioShowModal() {
    this.setState({ radioVisible: true });
  }
  completionShowModal() {
    this.setState({ completionVisible: true });
  }
  radioHandleOk() {
    var _this = this;
    var radioOptions = [];
    var flag = true;
    this.state.radioOptionsCount.map(data => {
      var optFlag = true;
      radioOptions.map(r => {
        if (r == $("#radio-options" + data).val()) {
          optFlag = false;
        }
      });
      if (optFlag) {
        radioOptions.push($("#radio-options" + data).val());
      } else {
        flag = false;
        notification.warn({
          placement: "bottomRight",
          message: "操作提示",
          description: "请勿添加相同选项！"
        });
      }
    });
    if (flag) {
      axios
        .post(
          "http://localhost:7952/api/Questionnaire/AddOptionsToChoiceQuestion",
          {
            Type: _this.state.type,
            Qid: _this.props.qid,
            RadioTitle: $("#radio-title").val(),
            RadioOptions: radioOptions
          }
        )
        .then(function(response) {
          if (response.data != null) {
            _this.props.setQuestionnaire(response.data);
            notification.success({
              placement: "bottomRight",
              message: "操作提示",
              description: "添加成功！"
            });
          } else {
            notification.warn({
              placement: "bottomRight",
              message: "操作提示",
              description: "添加失败，请重试！"
            });
          }
        })
        .catch(function(response) {
          console.log(response);
        });
      this.setState({ radioVisible: false });
    }
  }
  radioHandleCancel() {
    this.setState({ radioVisible: false });
  }
  completionHandleOk() {
    var _this = this;
    axios
      .post(
        "http://localhost:7952/api/Questionnaire/AddCompletionToQuestionnaire",
        {
          Qid: _this.props.qid,
          Title: $("#completion-title").val()
        }
      )
      .then(function(response) {
        if (response.data != null) {
          _this.props.setQuestionnaire(response.data);
          notification.success({
            placement: "bottomRight",
            message: "操作提示",
            description: "添加成功！"
          });
        } else {
          notification.warn({
            placement: "bottomRight",
            message: "操作提示",
            description: "添加失败，请重试！"
          });
        }
      })
      .catch(function(response) {
        console.log(response);
      });
    this.setState({ completionVisible: false });
  }
  completionHandleCancel() {
    this.setState({ completionVisible: false });
  }
  componentWillMount() {
    this.state.radioOptionsCount.push(1);
    this.state.radioOptionsCount.push(2);
    this.state.radioOptionsCount.push(3);
    this.state.radioOptionsCount.push(4);
  }
  handleChange(value) {
    this.state.type = value;
  }
  render() {
    return (
      <div>
        <Card
          title="添加题目"
          style={{
            width: 250,
            float: "right"
          }}
        >
          <Button
            type="primary"
            icon="plus"
            style={{
              display: "block",
              marginTop: "10px"
            }}
            onClick={this.radioShowModal}
          >
            添加选择题
          </Button>
          <Button
            type="primary"
            icon="plus"
            style={{
              display: "block",
              marginTop: "10px"
            }}
            onClick={this.completionShowModal}
          >
            添加填空
          </Button>
        </Card>
        <div>
          <Modal
            title="添加选择题"
            visible={this.state.radioVisible}
            onOk={this.radioHandleOk}
            onCancel={this.radioHandleCancel}
          >
            <h4>
              <span className="label label-primary">类型</span>
              <Select
                onChange={this.handleChange}
                defaultValue="radio"
                style={{
                  width: 80
                }}
              >
                <Select.Option value="radio">单选</Select.Option>
                <Select.Option value="multiselect">多选</Select.Option>
              </Select>
            </h4>
            <Input
              style={{
                width: 300,
                display: "inline-block",
                marginTop: 10
              }}
              id="radio-title"
              placeholder="输入题目:"
            />

            <Button
              type="primary"
              shape="circle"
              icon="plus"
              style={{
                display: "inline-block"
              }}
              onClick={this.radioPlus}
            />
            <Button
              type="primary"
              shape="circle"
              icon="minus"
              style={{
                display: "inline-block",
                margin: 10
              }}
              onClick={this.radioMinus}
            />{this.getRadioOptions()}

          </Modal>
          <Modal
            key="dsdsad"
            title="添加填空题"
            visible={this.state.completionVisible}
            onOk={this.completionHandleOk}
            onCancel={this.completionHandleCancel}
          >
            <Input
              style={{
                width: 500,
                display: "inline-block",
                marginTop: 10
              }}
              id="completion-title"
              placeholder="输入题目:"
              type="textarea"
              rows={4}
            />

          </Modal>
        </div>
      </div>
    );
  }
}
export default AddQuestion;
